<template>
  <div class="home">
      <div>
          <p>a:{{$store.state.a}}</p>
          <p>b:{{$store.state.b}}</p>
      </div>
      <div>
          <p>doubleA:{{$store.getters.doubleA}}</p>
          <p>doubleB:{{$store.getters.doubleB}}</p>
          <p>both:{{$store.getters.both}}</p>
          <p>doubleBoth:{{$store.getters.doubleBoth}}</p>
      </div>
      <br>
      <div>
          <h3>修改数据的方法_同步</h3>
          <p>
              <button @click="$store.commit('addA')">addA</button>
              <button @click="$store.commit('addAn',10)">addAn</button>
              <button @click="$store.commit('addBoth',{m:1,n:2})">addBoth</button>
              <!-- commit/dispatch 传入一个对象参数 type:触发的方法名  -->
              <button @click="$store.commit({type:'addBoth',m:1,n:2})">addBoth</button>
          </p>
      </div>
      <br>
      <div>
          <h3>修改数据的方法_异步</h3>
          <p>
              <button @click="$store.dispatch('addA_Async')">addA</button>
              <button @click="$store.dispatch('addAn_Async',10)">addAn</button>
          </p>
      </div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'HomeView',
  mounted(){
    console.log("当前实例",this);
    console.log("当前store实例",this.$store);
  }
}
</script>
